<!DOCTYPE html>
<!--
/**
 * Copyright (c) 2006, Opera Software ASA
 * All rights reserved.
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are met:
 *
 *     * Redistributions of source code must retain the above copyright
 *       notice, this list of conditions and the following disclaimer.
 *     * Redistributions in binary form must reproduce the above copyright
 *       notice, this list of conditions and the following disclaimer in the
 *       documentation and/or other materials provided with the distribution.
 *     * Neither the name of Opera Software ASA nor the
 *       names of its contributors may be used to endorse or promote products
 *       derived from this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY OPERA SOFTWARE ASA AND CONTRIBUTORS ``AS IS'' AND ANY
 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 * DISCLAIMED. IN NO EVENT SHALL OPERA SOFTWARE ASA AND CONTRIBUTORS BE LIABLE FOR ANY
 * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */
 -->
<html>
<head>
<title>Wobbling demo</title>
<style type='text/css'>

h1 {
  text-align: center;
  }

p {
  position:absolute;
  margin:0;
  padding:0;
  margin-left:-100px;
  margin-top:-100px;
  height:200px;
  width:200px;
  background-color:#f00;
  left:50%;
  top:300px;
  cursor:pointer;
  font-size: 40px;
  }

</style>
<script  type='text/javascript' src='../../animation.js' ></script>
<script type='text/javascript'>

var then = 0;

var wobbling=function(property, current, animation)
{

  var round=Math.round;
  var style=animation.style;
  var currentAmplitude=
    1+
    animation.amplitude*
    Math.exp(-current/100*animation.damping)*
    Math.sin(current/100*2*Math.PI*animation.oscillations)/100;
  style.height=round(currentAmplitude*animation.defaultHeight)+'px';
  style.width=round(currentAmplitude*animation.defaultWidth)+'px';
  style.marginTop=(-round(currentAmplitude*animation.defaultHeight/2))+'px';
  style.marginLeft=(-round(currentAmplitude*animation.defaultWidth/2))+'px';
 // style.fontSize = round(currentAmplitude*animation.defaultFont)+'px'
  var now = new Date();
  return null;
}

onload=function()
{
  if(!document.documentElement.createAnimation)
  {
    HTMLElement.activate();
  }
  var animation=document.getElementsByTagName('p')[0].createAnimation();
  animation.speed=.2; // the speed for the animation
  animation.oscillations=27; // number of oscilllations
  animation.damping=3; // 1 soft; 10 strong
  animation.amplitude=25; // the amplitude in percentages from the dimension of the element
  animation.defaultHeight=200; // in px
  animation.defaultWidth=200; // in px
//  animation.defaultFont = 40;
  animation.element.onclick=function()
  {
    animation.current=0;
    animation.addAnimation('wobbling', '', '', wobbling).run();
  };
}

var timers = [];
var deltas = [];
if(window.addEventListener)
{
window.addEventListener('OAnimationStart',function(){
  timers = [];
  deltas = [];
  timers[0] = new Date().getTime();
  deltas[0] = 0;
},false);
}

o_animationTimer.setOnFrame
(
  function(framerate)
  {
    document.getElementById('status').value=framerate;
  }
)
</script>
</head>
<body>
<h1>Custom Strategy: Wobbling</h1>
<p></p>
<input id="status"></input>
 <div style="position: absolute; bottom: 1em; left: 1em; border: 1px dotted red; background: infobackground; z-index: -1; padding: .4em;">
  This demo is made with the <a href="../../animation.js">Opera animation library</a>.
 </div>
</body>
</html>
